<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
.t1 span.c#r1,
.t2 *.c#r2,
.t3 span.c,
.t4 *.ca.cb,
.t5 :-webkit-any(div.ca.cb, *.cc.cd#r5b),
.t6 ~ div > span.c#r6,
.t7 ~ div > span.c,
.t8 + * ~ div.c#p8 span,
.t9 + * ~ div.c span,
.t10 + div > :-webkit-any(div.ca.cb, *.cc.cd#r10b) { background-color: rgb(0, 128, 0); }
</style>
<div>
    <div id="t1">
        <div></div>
        <div class="c"></div>
        <span></span>
        <span class="c"></span>
        <span class="c" id="r1"></span>
    </div>
</div>
<div>
    <div id="t2">
        <span></span>
        <span class="c"></span>
        <span class="c" id="r2"></span>
    </div>
</div>
<div>
    <div id="t3">
        <div></div>
        <div class="c"></div>
        <span></span>
        <span class="c" id="r3"></span>
    </div>
</div>
<div>
    <div id="t4">
        <span></span>
        <span class="ca"></span>
        <span class="cb"></span>
        <span class="ca cb" id="r4"></span>
    </div>
</div>
<div>
    <div id="t5">
        <div></div>
        <span></span>
        <fieldset></fieldset>
        <fieldset class="ca"></fieldset>
        <fieldset class="cc cd"></fieldset>
        <div class="ca cb" id="r5a"></div>
        <span class="cc cd" id="r5b"></span>
    </div>
</div>
<div>
    <div id="t6"></div>
    <div>
        <div class="c"></div>
        <span></span>
        <span class="c"></span>
        <span class="c" id="r6"></span>
    </div>
</div>
<div>
    <div id="t7"></div>
    <div>
        <div class="c"></div>
        <span></span>
        <span class="c" id="r7"></span>
    </div>
</div>
<div>
    <div id="t8"></div>
    <span>
        <span></span>
    </span>
    <span class="c">
        <span></span>
    </span>
    <div>
        <span></span>
    </div>
    <div class="c">
        <span></span>
    </div>
    <div class="c" id="p8">
        <span id="r8"></span>
    </div>
</div>
<div>
    <div id="t9"></div>
    <span>
        <span></span>
    </span>
    <span class="c">
        <span></span>
    </span>
    <div>
        <span></span>
    </div>
    <div class="c">
        <span id="r9"></span>
    </div>
</div>
<div>
    <div id="t10"></div>
    <div>
        <div></div>
        <span></span>
        <fieldset></fieldset>
        <fieldset class="ca"></fieldset>
        <fieldset class="cc cd"></fieldset>
        <div class="ca cb" id="r10a"></div>
        <span class="cc cd" id="r10b"></span>
    </div>
</div>

<script>
'use strict';
const transparent = "rgba(0, 0, 0, 0)";
const green = "rgb(0, 128, 0)";
document.body.offsetTop; // force style calculation

test(function() {
    assert_true(!!window.internals, "This test only works with internals exposed");
}, "internals are exposed");

test(function() {
    assert_equals(getComputedStyle(r1).backgroundColor, transparent, "Background color should initially be transparent");

    t1.className = "t1";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Subtree style recalc");
    assert_equals(getComputedStyle(r1).backgroundColor, green, "Background color is green after class change");
}, "Descendant with compound selector containing id");

test(function() {
    assert_equals(getComputedStyle(r2).backgroundColor, transparent, "Background color should initially be transparent");

    t2.className = "t2";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Subtree style recalc");
    assert_equals(getComputedStyle(r2).backgroundColor, green, "Background color is green after class change");
}, "Descendant with compound selector containing universal and id");

test(function() {
    assert_equals(getComputedStyle(r3).backgroundColor, transparent, "Background color should initially be transparent");

    t3.className = "t3";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "Subtree style recalc");
    assert_equals(getComputedStyle(r3).backgroundColor, green, "Background color is green after class change");
}, "Descendant with compound selector");

test(function() {
    assert_equals(getComputedStyle(r4).backgroundColor, transparent, "Background color should initially be transparent");

    t4.className = "t4";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "Subtree style recalc");
    assert_equals(getComputedStyle(r4).backgroundColor, green, "Background color is green after class change");
}, "Descendant with compound selector containing universal");

test(function() {
    assert_equals(getComputedStyle(r5a).backgroundColor, transparent, "Background color a should initially be transparent");
    assert_equals(getComputedStyle(r5b).backgroundColor, transparent, "Background color b should initially be transparent");

    t5.className = "t5";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Subtree style recalc");
    assert_equals(getComputedStyle(r5a).backgroundColor, green, "Background color a is green after class change");
    assert_equals(getComputedStyle(r5b).backgroundColor, green, "Background color b is green after class change");
}, "Descendant with :-webkit-any containing compound selector");

test(function() {
    assert_equals(getComputedStyle(r6).backgroundColor, transparent, "Background color should initially be transparent");

    t6.className = "t6";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Subtree style recalc");
    assert_equals(getComputedStyle(r6).backgroundColor, green, "Background color is green after class change");
}, "Sibling with compound descendant containing id");

test(function() {
    assert_equals(getComputedStyle(r7).backgroundColor, transparent, "Background color should initially be transparent");

    t7.className = "t7";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "Subtree style recalc");
    assert_equals(getComputedStyle(r7).backgroundColor, green, "Background color is green after class change");
}, "Sibling with compound descendant");

test(function() {
    assert_equals(getComputedStyle(r8).backgroundColor, transparent, "Background color should initially be transparent");

    t8.className = "t8";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Subtree style recalc");
    assert_equals(getComputedStyle(r8).backgroundColor, green, "Background color is green after class change");
}, "Compound sibling selector containing id");

test(function() {
    assert_equals(getComputedStyle(r9).backgroundColor, transparent, "Background color should initially be transparent");

    t9.className = "t9";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "Subtree style recalc");
    assert_equals(getComputedStyle(r9).backgroundColor, green, "Background color is green after class change");
}, "Compound sibling selector");

test(function() {
    assert_equals(getComputedStyle(r10a).backgroundColor, transparent, "Background color a should initially be transparent");
    assert_equals(getComputedStyle(r10b).backgroundColor, transparent, "Background color b should initially be transparent");

    t10.className = "t10";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Subtree style recalc");
    assert_equals(getComputedStyle(r10a).backgroundColor, green, "Background color a is green after class change");
    assert_equals(getComputedStyle(r10b).backgroundColor, green, "Background color b is green after class change");
}, "Sibling with descendant :-webkit-any containing compound selector");

</script>
